<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>08.浏览器请求缓存问题</title>
  </head>
  <body>
    <p>
      在低版本的某些浏览器Ajax会出现一个问题：在请求地址不变化的情况下，只有第一次请求会真正的发送到服务器端，后续的请求会冲浏览器缓存中获取，即使服务器端有更新，客户端依然是读取的旧的缓存数据
    </p>
    <p style="color: red">
      解决方案，在请求地址后面加请求参数，保证每一次的请求参数的值不同
    </p>
    <pre>
      xhr.open('get','http://www.example.com?='+Math.random())
    </pre>
    <button id="btn">发送 Ajax</button>
  </body>
</html>
<script>
  let btn = document.getElementById("btn");
  btn.onclick = function () {
    const xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:3000/cache?t=" + Math.random());
    xhr.send();

    //低版本浏览器不支持 onload
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    };
  };
</script>
